<script setup lang="ts">

import {computed} from "vue";
import {data, StarWithPlanet} from "../js/Data";
import {Star} from "../js/Star";
import {starTypeIdNameMap} from "../ts/StarType.ts";
import {Resource, resourceMap} from "../js/Resource";
import {Util} from "../js/Util";
import {Item, itemMap} from "../js/Item.ts";
import {Planet} from "../js/Planet.ts";

let starData: Array<Star> = data.starData
let planetResourceData = data.planetResourceData

let starResourceMap = new Map<number, Set<Resource>>()
for (let s of starData) {
  starResourceMap.set(s.id, new Set<Resource>())
}

for (let pr of planetResourceData) {
  starResourceMap.get(data.planetMap.get(pr.planetId)?.starId || 0)?.add(resourceMap.get(pr.itemId) ?? new Resource())
}

class StarRow extends Star {
  distance: number = 0
  itemArray: Map<number, Item> = new Map<number, Item>()
}

class PlanetRow extends Planet {
  itemArray: Array<Item> = []
}

let list: Array<Row> = []
for (let s of starData) {
  list.push(Object.assign(new Row(), {
    distance: Util.formatNumber(Math.sqrt(Math.pow(s.x, 2) + Math.pow(s.y, 2) + Math.pow(s.z, 2))),
    itemArray: data.planetResourceData.map(pr => itemMap.get(pr.itemId) ?? new Item())
  }, s))
}

list = list.sort((a, b) => {
  return a.distance - b.distance
})

let filter = computed((): Array<Row> => {
  let temp: Array<Row> = [...list]

  if (data.filter.starTypeId > 0) {
    temp = temp.filter((s) => {
      return s.typeId == data.filter.starTypeId
    })
  }

  if (data.filter.resourceTypeId > 0) {
    temp = temp.filter((s) => {
      return starResourceMap.get(s.id)?.has(resourceMap.get(data.filter.resourceTypeId) ?? new Resource())
    })
  }

  return data.filter.limitShow > 0 ? temp.slice(0, data.filter.limitShow) : temp
})

let changeTargetStar = (s: Star) => {
  data.target = new StarWithPlanet(s, data.planetData.filter((p) => p.starId == s.id)[0])
  data.filter.onlyCurrentStar = true
  data.chooseTab = 'galaxy'
}
</script>

<template>
  <n-space align="start" vertical>
    <n-button-group>
      <n-button :type="0 == data.filter.limitShow ? 'primary' : 'default'" style="width: 100px"
                @click="data.filter.limitShow = 0">
        全部
      </n-button>
      <n-button :type="10 == data.filter.limitShow ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.limitShow = 10">
        10
      </n-button>
      <n-button :type="20 == data.filter.limitShow ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.limitShow = 20">
        20
      </n-button>
      <n-button :type="50 == data.filter.limitShow ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.limitShow = 50">
        50
      </n-button>
      <n-button :type="100 == data.filter.limitShow ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.limitShow = 100">
        100
      </n-button>
    </n-button-group>
    <n-button-group>
      <n-button :type="0 == data.filter.starTypeId ? 'primary' : 'default'" style="width: 100px"
                @click="data.filter.starTypeId = 0">
        全部
      </n-button>
      <n-button v-for="st in data.starTypeData" :type="st.id == data.filter.starTypeId ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.starTypeId = st.id">
        {{ st.name }}
      </n-button>
    </n-button-group>
    <n-button-group>
      <n-button :type="0 == data.filter.resourceTypeId ? 'primary' : 'default'" style="width: 100px"
                @click="data.filter.resourceTypeId = 0">
        全部
      </n-button>
      <n-button v-for="r in data.resourceData" :type="r.id == data.filter.resourceTypeId ? 'primary' : 'default'"
                style="width: 100px" @click="data.filter.resourceTypeId = r.id">
        {{ r.name }}
      </n-button>
    </n-button-group>
  </n-space>
  <n-table style="margin-top: 10px" :bordered="false">
    <thead>
    <tr>
      <th style="min-width: 40px">名称</th>
      <th style="min-width: 40px">类型</th>
      <th style="min-width: 40px">光度</th>
      <th style="min-width: 40px">坐标</th>
      <th style="min-width: 40px">距离</th>
      <th>稀有资源</th>
      <th style="min-width: 40px">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="s in filter">
      <td>{{ s.name }}</td>
      <td>{{ starTypeIdNameMap.get(s.typeId) }}</td>
      <td>{{ s.luminosity }}</td>
      <td>{{ s.x }}, {{ s.y }}, {{ s.z }}</td>
      <td>{{ s.distance }}</td>
      <td>
        <n-image-group>
          <n-space>
            <n-image
                v-for="r in starResourceMap.get(s.id)"
                width="32"
                :src=Util.srcHandler(r)
            />
          </n-space>
        </n-image-group>
      </td>
      <td>
        <n-button
            :type="s.id == data.target.star.id ? 'primary' : 'default'"
            @click="changeTargetStar(s)"
        >查看
        </n-button>
      </td>
    </tr>
    </tbody>
  </n-table>
</template>

<style scoped>

</style>